<template>
  <div>
    <el-row type="flex" :justify="[!isBot ? 'end' : 'start']">
      <el-col v-if="isBot" class="me-head" :span="2">
        <img class="head-img" src="../assets/bavtor.png"/>
      </el-col>
      <div :class="[isBot ? 'robot-tag' : 'me-tag']">
        <div :class="[isBot ? 'txt' : '']">
          <span>{{msg}}</span>
        </div>
      </div>
      <el-col v-if="!isBot" class="me-head" :span="2">
        <img class="head-img" src="../assets/uavtor.png"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    props: ['msg','direation'],
    data() {
      return {
        isBot: this.direation < 6
      }
    },
  }
</script>

<style scoped>
  .robot-tag {
    margin-top: 14px;
    margin-bottom: 14px;
    margin-left: 2%;
    justify-content: flex-end;
    padding: 10px;
    background-color: var(--gray);
    border-radius: 10px;
    border: 2px solid #fafafae7;
    word-wrap: break-word;
    text-align: left;
  }
  .me-tag {
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 10px;
    background-color: #e7f8ff;
    border-radius: 10px;
    border: 2px solid #cdedfa;
    word-wrap: break-word;
    text-align: left;
  }
  .head-img {
    margin-top: 16px;
    margin-bottom: 14px;
    margin-left: 14px;
    width: 40px;
    height: 40px;
    background-color: black ;
    border-radius: 5px;
  }
  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }
  .txt {
    /* border-right: 2px solid #333; */
    font-family: monospace;
    /* font-size: 28px; */
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: typing 2s steps(16, end) forwards;
  }

</style>